<template>
  <div>
     <!-- @refresh="onRefresh" -->
     <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <ArticleItems
    @click.native="ClickFn(obj.art_id)"
      v-for="obj in articles"
      :key="obj.art_id"
      :obj="obj"
    ></ArticleItems>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItems from '../../../components/ArticleItem.vue'
import { articlesListAPI } from '@/api'
export default {
  props: {
    id: Number
  },
  components: {
    ArticleItems
  },
  data () {
    return {
      articles: [],
      list: [],
      loading: false,
      finished: false,
      nextTime: new Date(),
      refreshing: false
    }
  },
  async created () {
    const res = await articlesListAPI({ channel_id: this.id })
    console.log(res)
    this.articles = res.data.data.results
    this.nextTime = res.data.data.pre_timestamp
  },
  methods: {
    async  onLoad () {
      if (this.articles.length > 0) {
        const res = await articlesListAPI({
          channel_id: this.id,
          timestamp: this.nextTime
        })
        if (res.data.data.results && res.data.data.results.length === 0) {
          this.finished = true
          this.nextTime = null
        } else {
          this.nextTime = res.data.data.pre_timestamp
        }
        // if (res.data?.data?.results?.length === 0) {
        //   this.finished = true
        // }

        console.log(res)
        this.articles = [...this.articles, ...res.data.data.results]
        this.nextTime = res.data.data.pre_timestamp
        this.loading = false
      }
    },
    async onRefresh () {
      // 清空列表数据
      this.articles = []
      const res = await articlesListAPI({
        channel_id: this.id,
        timestamp: this.nextTime
      })
      this.nextTime = res.data.data.pre_timestamp
      this.articles = res.data.data.results
      this.refreshing = false
    },
    ClickFn (art_id) {
      this.$router.push({
        path: '/article_detail',
        query: {
          aid: art_id
        }
      })
    }
  }
}
</script>

<style>
</style>
